<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<style type="text/css">
			*{
				--bg_color:#fff;
			}
			.mui-content{
				background-color: var(--bg_color);
				height: 100vh;
			}
			.mui-content > .mui-table-view:first-child{
				margin: 0;
			}
			.mui-table-view{
				background-color: var(--bg_color);
			}
			.img-radius-6p{
				border-radius: 6px;
			}
			.mui-table-view-cell:after {
				background-color: rgba(0,0,0,.03);
			}
			
			.bg-box{
				background-color: #000;
				height: 70px;
				width: 100%;
			}
			.main-box{
				    border-top-left-radius: 50px;
				    border-top-right-radius: 50px;
				    background-color: var(--bg_color);
				    padding-top: 50px;
				    transform: translatey(-50px);
			}
			.mui-table-view:before,.mui-table-view::after{
				background-color: transparent;
				
			}
			.main-box li{
				border: 1px solid #000000;
			}
			.main-box li+li{
				border-top: none;
			}
			.main-box li:active{
				background-color: #cfcfcf;
			}
			
			div.mui-media-body .msg-angle{
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background-color: #e60000;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="bg-box"></div>
			<div class="main-box">
				
				<ul class="mui-table-view" id="msg-box">
					
					
				</ul>
			</div>
		</div>
		
		<script src="../../js/mui.js"></script>
		<script src="../../js/main.js"></script>
		<script src="../../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.init()
			 window._socket = null;
			 
			 var messageManager;
			 var msgHisManager;
			 var initSocket;
			 
			mui.plusReady(function () {
				var entity = JSON.parse(plus.storage.getItem("userInfo"));
				
				//消息列表管理器
				 messageManager = new APP.model.MessageManager(entity.id);
				 
				 _initMsgs();
				 var currentWebview=plus.webview.currentWebview();
				 
				 initSocket = function(){
				  	_socket = new Socket("ws://"+_GLOBAL_SERVER_IP+":8611/ws");
				  	_socket.onopen=function(){
						// 登录
						_socket.send({
							cmd: 10,
							extAttr: {
								userId: entity.id
							}
						});
				  	}
				  	_socket.onmessage=function(e){ 
						var _content = e.data;
						_content = JSON.parse(_content);
						
					
						if (_EventType.CHAT_FRIEND == _content.cmd) {
							// 消息历史管理器
							msgHisManager = new APP.model.MsgHistoryManager(entity.id,_content.sender);
							
							const friends = APP.cache.UserFriends.get(entity.id);
							var _friend = null;
							for (var i = 0; i < friends.length; i++) {
								if (friends[i].friendId === _content.sender) {
									_friend = friends[i];
									break;
								}
							}
							
							
							
							let msgObj = {
								photo: _friend.photo,
								content: {
									text: _content.msgType !== "2" ? _content.content : "",
									img: _content.msgType === "2" ? _content.content : ""
								}
							};
						
							msgHisManager.pushMsg({
								type: 2,
								entity: msgObj
							});
							
							setTimeout(() => {
								const fid = _friend.friendId;
								const fphoto = _friend.photo;
								const fname = _friend.friendName;
								const fmsgText = _content.content;
								const isRead = false; 
								// 缓存消息列表
								messageManager.pushMsg(new APP.model.Message(fid, fphoto, fname, fmsgText, isRead));
								_initMsgs();
							}, 0);
							
							var audioObj = plus.audio.createPlayer("../../audio/momo.mp3");
							audioObj.play();
						}
				   	}
				   	_socket.init(); 
				 					
				  }
				 initSocket();
			     
			   
			   
			   mui(document).on("tap","[data-friend-id]",function(){
				   var friendId = $(this).attr("data-friend-id");
				   var friendName = $(this).attr("data-friend-name");
				   var friendPhoto = $(this).attr("data-friend-photo");
				   
				   plus.nativeUI.showWaiting();
				   plus.webview.create("../im-chat.html","im-chat",{},{_ext_user_id:friendId,_ext_user_name:friendName,_ext_user_photo:friendPhoto});
				   
				   setTimeout(()=>{
					   messageManager.eliminateAngle(friendId,_initMsgs);
				   },3000)
			   })
			  
			})
			
			
			function _initMsgs(){ 
				const msgs = messageManager.getMsg(); 
				if(msgs){
					var html = renderHtml(msgs);
					$("#msg-box").html(html);
				}
				
			}
			 
			function renderHtml(obj){
				var html = ""; 
				
				for (var i = 0; i < obj.length; i++) {
					html+='<li class="mui-table-view-cell mui-media"  data-friend-photo="'+obj[i].friendPhoto+'"  data-friend-name="'+obj[i].friendName+'" data-friend-id="'+obj[i].friendId+'">';
						html+='<a href="javascript:;">';
						html+='	<img class="mui-media-object mui-pull-left img-radius-6p" style="width:60px;height:45px" src="'+(obj[i].friendPhoto?obj[i].friendPhoto:"../../img/def_photo.jpg")+'" style="border:1px solid #000000">';
						html+='	<div class="mui-media-body">';
								html+=obj[i].friendName;
								if(!obj[i].isRead){
									html+='<span class="msg-angle"></span>';
								}
							html+='	<p class="mui-ellipsis">'+obj[i].msgText+'</p>';
							html+='</div>';
						html+='</a>'; 
					html+='</li>';
				}
				
				return html;
			}
		</script>
	</body>

</html>
